<!-- @format -->

<template>
  <div class="my-goods-list">
    <!-- 使用 -->
    <MyTable :list="goodsList">
      <template #thead>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <!-- 解构+重命名 -->
      <template #default="{ row: item, i }">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>
        <td>
          <span
            class="badge text-bg-success"
            v-for="(str, index) in item.tags"
            :key="index"
            >{{ str }}</span
          >
        </td>
        <td>
          <button
            class="btn btn-danger btn-sm"
            @click="del(i)">
            删除
          </button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
  // 导入
  import MyTable from './MyTable.vue'
  // 导入 axios
  import axios from 'axios'
  export default {
    // 注册
    components: {
      MyTable
    },
    data() {
      return {
        // 商品列表
        goodsList: []
      }
    },
    created() {
      // 组件创建后、调用方法、获取商品列表
      this.getGoodsList()
    },
    methods: {
      async getGoodsList() {
        // 发请求
        const resp = await axios.get('https://www.escook.cn/api/goods')
        // 保存数据
        this.goodsList = resp.data.data
      },
      del(i) {
        this.goodsList.splice(i, 1)
      }
    }
  }
</script>

<style></style>
